<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()
const isDispose = ref(true)


const sliderVal1 = ref(0)
const sliderVal2 = ref(0)
</script>
<template>
    <div class="bg_black">
        <div class="back_title">
            <div class="btn_back" @click="router.go(-1)">
                <img src="../../assets/img/ico_back.png" alt="">
                返回
            </div>
        </div>

        <div class="warning_info">
            <ul>
                <li>设备名称: 11号SO2</li>
                <li>安装位置: 3号煤场-C区（褐煤）</li>
                <li>预警开始时间: 2024-7-07  09:40:07</li>
            </ul>
            <ul>
                <li>预警内容: 
                    <span v-if="isDispose"><11号SO2>浓度为35%PPM，请及时排查!</span>
                    <span v-else class="red">温度68.2℃，请及时排查!</span>
                </li>
            </ul>
            <div class="state" v-if="isDispose">
                已处理
            </div>
            <div class="state bg_red" v-else>
                未处理
            </div>
        </div>

        <div class="streaming">
            <div class="mv_ph">
                <img class="ph" src="../../assets/img/1.jpg" alt="">
                <p>CAM01   09/09/2023  星期一  13:23:41</p>
            </div>
            <div class="mv_control">
                <h3>云台控制</h3>

                <div class="control_btn">
                    <div class="refresh">
                        <img src="../../assets/img/ico_9.png" alt="">
                    </div>
                    <div class="caret_top">
                        <el-icon color="#fff" size="26"><CaretTop /></el-icon>
                    </div>
                    <div class="caret_bottom">
                        <el-icon color="#fff" size="26"><CaretBottom /></el-icon>
                    </div>
                    <div class="caret_left">
                        <el-icon color="#fff" size="26"><CaretLeft /></el-icon>
                    </div>
                    <div class="caret_right">
                        <el-icon color="#fff" size="26"><CaretRight /></el-icon>
                    </div>
                </div>
                <div class="control_slider">
                    <span class="name">变倍</span>
                    <el-slider v-model="sliderVal1" />
                </div>
                <div class="control_slider">
                    <span class="name">变焦</span>
                    <el-slider v-model="sliderVal2" />
                </div>
                <div class="button_gray">
                    <el-button color="#63626A" size="large" round style="width: 180px;" @click="isDispose = !isDispose">截屏</el-button>
                </div>
            </div>

        </div>


    </div>
</template>
<style scoped lang="scss">


.warning_info{
    background: #29282C;
    margin:15px 20px 0;
    color:#fff;
    font-size: 15px;
    padding:14px 30px;
    position: relative;
    overflow: hidden;
    .state{
        position: absolute;
        right: -48px;
        top: 5px;
        background: #9AA5AD;
        line-height: 34px;
        width: 150px;
        text-align: center;
        font-size: 16px;
        transform: rotate(35deg);
        &.bg_red{
            background: #E04940;
        }
    }
    ul{
        display: flex;
        align-items: center;
        padding:10px 0;
        li{
            margin-right: 160px;
            line-height: 20px;
        }
    }
}
.back_title{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 50px;
    border-bottom: 3px solid #29282C;
    .btn_back{
        display: flex;
        align-items: center;
        color:#fff;
        padding:0 20px;
        font-size: 16px;
        line-height: 20px;
        img{
            margin-right: 5px;
        }
    }
}
</style>